import { vipTypeList } from "@/utils/common";
import Https from "@/utils/Https";
import { ProDescriptions } from "@ant-design/pro-components";
import { Drawer, message, Spin } from "antd";
import dayjs from "dayjs";
import { FC, useEffect, useState } from "react";
import styles from "../styles.less";
const ReservationRecord: FC<any> = (props) => {
  const { open, onClose, reservationInfo } = props;
  const [loading, setLoading] = useState(false);
  const [info, setInfo] = useState<any>({});
  //获取预约记录详情
  const getDetails = async (id) => {
    setLoading(true);
    let res: any = await Https.post("/book/record/recordDetail", { id }, true);
    if (res.code == 200 && res.data) {
      setInfo(res.data);
    } else {
      message.error(res.msg);
    }
    setLoading(false);
  };
  useEffect(() => {
    if (open && reservationInfo.id) {
      getDetails(reservationInfo.id);
    }
  }, [open]);
  return (
    <Drawer
      width={"50%"}
      onClose={() => {
        onClose();
      }}
      title={"预约记录详情(团体课)"}
      open={open}
      footer={null}
      className={styles.Reservation}
    >
      <Spin spinning={loading}>
        {info.payType == 1 && (
          <ProDescriptions title="支付信息" column={2}>
            <ProDescriptions.Item label="支付方式">
              微信支付
            </ProDescriptions.Item>
            <ProDescriptions.Item label="支付金额">
              ¥{Number(info.payValue) / 100}元
            </ProDescriptions.Item>
            <ProDescriptions.Item label="订单号">
              {info.orderNo}
            </ProDescriptions.Item>
          </ProDescriptions>
        )}
        {info.payType == 0 && (
          <ProDescriptions column={2} title="用户会员卡信息">
            <ProDescriptions.Item label="卡号">
              {info.cardNo}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="卡名称">
              {info.cardName}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="卡类型"
              valueEnum={{
                1: { text: "储值卡" },
                2: { text: "期限卡" },
                3: { text: "次数卡" },
              }}
            >
              {info.vipType}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="卡种类"
              valueEnum={{
                1: { text: "正式卡" },
                2: { text: "体验卡" },
              }}
            >
              {info.vipCategory}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="持卡人">
              {info.userName}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="手机号">
              {info.phone}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="有效期至" valueType="date">
              {info.uvipCardEffectiveTime}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="扣除后余额">
              {info.vipType == 2
                ? "-"
                : (info && info.leftValue) || info.leftValue == 0
                ? info.vipType == 1
                  ? Number(info.leftValue) / 100 +
                    vipTypeList[info.vipType].status
                  : Number(info.leftValue) + vipTypeList[info.vipType].status
                : "-"}
            </ProDescriptions.Item>
          </ProDescriptions>
        )}
        <ProDescriptions
          column={2}
          title="预约课程信息"
          style={{ marginTop: "24px" }}
        >
          <ProDescriptions.Item label="课程信息">
            {info.courseName}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="预约上课时间">
            {dayjs(info.bookClassStartTime).format("YYYY-MM-DD HH:mm")}-
            {dayjs(info.bookClassEndTime).format("HH:mm")}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="单课时长">
            {info.courseDuration}分钟
          </ProDescriptions.Item>
          <ProDescriptions.Item label="授课老师">
            {info.courseCoachName}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="预约人数">
            {info.appointPeopleNum}人
          </ProDescriptions.Item>
          {info.payType == 1 && (
            <ProDescriptions.Item label="扣除">
              ¥{Number(info.payValue) / 100}元
            </ProDescriptions.Item>
          )}
          {info.payType == 0 && (
            <ProDescriptions.Item label="扣除">
              {info.vipType == 2
                ? "-"
                : (info && info.payValue) || info.payValue == 0
                ? info.vipType == 1
                  ? Number(info.payValue) / 100 +
                    vipTypeList[info.vipType].status
                  : Number(info.payValue) + vipTypeList[info.vipType].status
                : "-"}
            </ProDescriptions.Item>
          )}
          <ProDescriptions.Item label="上课教室">
            {info.classRoomName}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="备注">
            {info.remark}
          </ProDescriptions.Item>
        </ProDescriptions>
        <ProDescriptions
          column={2}
          title="预约状态信息"
          style={{ marginTop: "24px" }}
        >
          <ProDescriptions.Item label="预约状态">
            {info.status == 1
              ? "排队中"
              : info.status == 2
              ? "已预约"
              : info.status == 3
              ? "已完成"
              : "已取消"}
            |{info.signinFlag == 0 ? "未签到" : "已签到"}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="记录创建时间" valueType="dateTime">
            {info.createTime}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="操作人">
            {info.bookOperator}
          </ProDescriptions.Item>
        </ProDescriptions>
      </Spin>
    </Drawer>
  );
};
export default ReservationRecord;
